<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
	<meta charset="UTF-8"/>
	<link th:href="@{/css/bootstrap-table.min.css}" rel="stylesheet" />
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{/css/bootstrap-table.min.css}" rel="stylesheet" />
    <style type="text/css">
       .order-form{
         height: 49px;
         background-color: #ccc;
       }
       .control-group{
          float: left; 
          width: 20%; 
          margin-top: 10px;
       }
       label{
         width: 96px; 
         text-align: right; 
         display: table-cell; 
         vertical-align: middle;
       }
       .control{
         display: table-cell; 
         padding-left: 3px;
       }
       .control-input{
         width: 125px;
       }
       .control-button{
         float: right; 
         padding-right: 120px; 
         padding-top: 10px;
       }
       .control-button-input{
         background-color: #009688; 
         border-color: #009688; 
         color: aliceblue; 
         width: 70px; 
         height: 28px;
         border-radius: 8px;
       }
       .control-button-input1{
         background-color: #b96146; 
         border-color: #b96146; 
         color: aliceblue; 
         width: 60px; 
         height: 28px;
         border-radius: 8px;
       }
       .control-button-input2{
         background-color: #03A9F4; 
         border-color: #03A9F4; 
         color: aliceblue; 
         width: 75px; 
         height: 28px;
         border-radius: 8px;
       }
/*      tr:hover{
         background-color:#00FF00
       }  */
       thead tr{
          background-color:#9e9e9e42;
       }    
    </style>
</head>
<body>
	<div>
		<form class="order-form" id="filterForm">
			<div class="control-group">
				<label>姓名:</label>
				<div class="control">
					<input type="text" class="control-input" id="payId"/>
				</div>
			</div>
			<div class="control-group">
				<label>帐号:</label>
				<div class="control">
					<input type="text" class="control-input" id="merchantId"/>
				</div>
			</div>
			<div class="control-group">
				<label>状态:</label>
				<div class="control">
					<input type="text" class="control-input" id="orderId"/>
				</div>
			</div>
			<div style="padding-top: 11px;">
			    <input type="button" value="查询" id="btn_query" class="control-button-input"/>
			    &nbsp;
			    <input type="button" value="重置" id="btn_reunion" class="control-button-input1"/>
			</div>
		</form>
		<div style="position: relative;top: -11px;">
		    <input type="button" value="添加账号" id="btn_query" class="control-button-input2"/>
		</div>
		<form id='dictGridDiv'></form>
	</div>
</body>
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/bootstrap-table.js}"></script>
<script th:src="@{/js/app-common-2.00.0.js}"></script>
<script th:src="@{/js/layer/layer.js}"></script>
<script th:src="@{/js/jquery.form.js}"></script>
<script th:inline="javascript">
/* <![CDATA[ */
	$(function() {
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();
		$("#btn_query").click(function() {
			$("#dictGridDiv").bootstrapTable('destroy');
			var oTable = new TableInit();
			oTable.Init();
		});
		$("#btn_reunion").click(function() {
			$("#payId").val("");
			$("#merchantId").val("");
			$("#orderId").val("");
		    $("#channelCode").val("");
			$("#dictGridDiv").bootstrapTable('destroy');
			var oTable = new TableInit();
			oTable.Init();
		});
	});
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#dictGridDiv').bootstrapTable({
					url : [[${#httpServletRequest.getContextPath()}]]+'/sysuser/querypage',
					dataType : "json",
					toolbar : '#toolbar', //工具按钮用哪个容器
					striped : true, //是否显示行间隔色
					singleSelect : false,
					pagination : true, //分页
					pageNumber : 1, //初始化加载第一页，默认第一页
					queryParams : queryParams,
					pageSize : 10, //每页的记录行数（*）
					pageList : false, //可供选择的每页的行数（*）
					//search: true, //显示搜索框
					sidePagination : "server", //服务端处理分页
					columns : [ 
					           {
								 field : 'id',
								 title : '编号',
								 align : 'center',
								 width : '280'
								 
								},{
								 field : 'userName',
								 title : '姓名',
								 align : 'center',
								 width : '280'
							    },{
								 field : 'userId',
							     title : '账号',
								 align : 'center',
								 width : '280'
								},{
								 field : 'password',
								 title : '密码',
								 align : 'center',
								 width : '280'
								},{
								 field : 'roleName',
								 title : '角色',
								 align : 'center',
								 width : '200'
							    },{
							     field : 'status',
								 title : '状态',
								 align : 'center',
								 width : '200',
								 formatter : function(val, rowdata, rowindex, td, trL) {
									 if(val== 0 || val=='0'){
										 return "启用";
									 }else if(val== 1 || val=='1'){
										 return "停用";
									 }else{
										 return null;
									 }
								 }
								},/* {
								 field : 'createTime',
								 title : '创建时间',
								 align : 'center',
								 formatter : function(val, rowdata, rowindex, td, trL) {
										if(val==""||val==null) return "";
										return app.inputDate.myformatterTime(new Date(val));
									},
								 width : '300'
								}, */{
								 title : '选项',
								 align : 'center',
								 width : '280',
								 formatter : function(value, row,index) {
									    var Update = '<a href="#" mce_href="#" onclick="Add(\''+ row.userId+ '\')">修改</a> &nbsp;&nbsp;';
										var Delete = '<a href="#" mce_href="#" onclick="Delete(\''+ row.userId+ '\')">删除</a> &nbsp;&nbsp;';
										var Upstatus='';
									    if(row.status== 0 || row.status=='0'){
									    	Upstatus = '<a href="#" mce_href="#" onclick="Upstatus(\''+ row.userId+ '\',1)">停用</a> &nbsp;&nbsp;'; 
									    }else if(row.status== 1 || row.status=='1'){
									    	Upstatus = '<a href="#" mce_href="#" onclick="Upstatus(\''+ row.userId+ '\',0)">启用</a> &nbsp;&nbsp;'; 
									    }
										return Update  + Delete + Upstatus;
								 }
								} ]
							});
		};
		function queryParams(params) {
			return {
				pageSize : params.limit, //页面大小
				pageNumber : params.offset, //页码
				payId: $("#payId").val(),
				merchantId:$("#merchantId").val(),
				orderId:$("#orderId").val(),
			    channelCode:$("#channelCode").val(),
			};
		}
		return oTableInit;
	};
	
	//启用 - 停用
	function Upstatus(userId,status){
		var titie='';
		if(status == 0){
			titie ='确定要启用吗?';
		}else if(status == 1){
			titie ='确定要停用吗?';
		}
		layer.confirm(titie, function() {
			//调用ajax局部启动
			$.ajax({
				url : "${webroot}/sysuser/upstatus",
				type : "POST",
				data : {
					"userId" : userId,
					"status" : status
				},
				dataType : "json",
				async : false,
				cache : false,
				success : function(obj) {
					if (obj != null) {
						if (obj.success) {
							layer.msg("操作成功");
						} else {
							layer.msg("操作失败");
						}
					}
				}
			});
			$("#dictGridDiv").bootstrapTable('destroy');
			var oTable = new TableInit();
			oTable.Init();
		});
	}
	
	//新增 - 修改
	function Add(userId){
		window.location.href = '${webroot}/sysuser/detail?id='+userId;
	}
	
	//删除
    function Delete(userId){
    		layer.confirm('确定要删除吗?', function() {
    			//调用ajax局部启动
    			$.ajax({
    				url : "${webroot}/sysuser/delete",
    				type : "POST",
    				data : {
    					"id" : userId
    				},
    				dataType : "json",
    				async : false,
    				cache : false,
    				success : function(obj) {
    					if (obj != null) {
    						if (obj.success) {
    							layer.msg("删除成功");
    						} else {
    							layer.msg("删除失败");
    						}
    					}
    				}
    			});
    			$("#dictGridDiv").bootstrapTable('destroy');
    			var oTable = new TableInit();
    			oTable.Init();
    		});
	}	 
    /* ]]> */
</script>
</html>